<template>
	<view>
		<view class="register-title">
			性别&年龄
		</view>
		<view class="register-tip">
			注册完成，您的性别将无法修改
		</view>
		<view class="register-sex">
			<view class="register-sex-item" v-for="item in state.sexList" :key="item.id" @click="sexFn(item)">
				<img :src="item.iconGrey" alt="">
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="register-tip">
			设置生日（年龄大于18岁）
		</view>
		<view class="register-birthday register-birthday-cur" @click="selectBirthday">
			<view class="birthday-year">{{ state.currentDate[0] }}</view>
			<view class="birthday-month">{{ state.currentDate[1] }}</view>
			<view class="birthday-day">{{ state.currentDate[2] }}</view>
		</view>
		<view class="register-tip">
			常驻城市
		</view>
		<view class="register-birthday register-position" :class="state.isCity ? 'register-birthday-cur' : ''">
			<view class="select-city" @click="popupCity()">
				<view class="birthday-city">{{ state.currentCity[0] ? state.currentCity[0] : "省" }}</view><text>-</text>
				<view class="birthday-city">{{ state.currentCity[1] ? state.currentCity[1] : "市" }}</view>
			</view>
			<view class="select-city-position" @click="getAddress()">
				<img src="@/assets/image/icon41.png" alt="" /><text>定位</text>
			</view>
		</view>
		<uni-popup ref="popupRef" type="bottom">
			<van-date-picker :min-date="state.minDate" :max-date="state.maxDate" @confirm="confirm" @cancel="cancel"
				title="选择日期" />
		</uni-popup>
		<uni-popup ref="popupCityRef" type="bottom">
			<van-picker title="选择城市" :columns="state.columns" @cancel="cancel" @confirm="confirmCity" />
		</uni-popup>
		<!-- <el-amap v-show="false" ref="map" :center="center" :zoom="zoom" @init="init" /> -->
	</view>
</template>

<script setup>
	import {
		getCity
	} from "@/api/register/index.js"

	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		shallowRef
	} from "vue"
	import sex1Grey from '@/assets/image/icon39.png'
	import sex2Grey from '@/assets/image/icon40.png'
	import sex1 from '@/assets/image/icon42.png'
	import sex2 from '@/assets/image/icon43.png'
	let {
		proxy
	} = getCurrentInstance()
	let curDate = new Date()
	let _year = curDate.getFullYear() - 18
	let _m = curDate.getMonth()
	let _d = curDate.getDate()
	const state = reactive({
		sexList: [{
				id: 0,
				iconGrey: sex1Grey,
				icon: {
					1: sex1,
					2: sex1Grey,
				},
				name: "我是女生"
			},
			{
				id: 1,
				iconGrey: sex2Grey,
				icon: {
					1: sex2,
					2: sex2Grey,
				},
				name: "我是男生"
			},
		],
		minDate: new Date(1945, 0, 1),
		maxDate: new Date(_year, _m, _d),
		columns: [],
		isCity: false,
		curSex: null,
		currentDate: [],
		currentCity: [],
		HeightWeightData: []
	});

	// 初始生日
	(function() {
		let temp = new Date(new Date().getTime() - 567648000000);
		let temp_Y = temp.getFullYear() + '';
		let temp_M = temp.getMonth() + 1;
		temp_M = temp_M > 10 ? temp_M + '' : '0' + temp_M;
		let temp_D = temp.getDate();
		temp_D = temp_D > 10 ? temp_D + '' : '0' + temp_D;
		state.currentDate = [temp_Y, temp_M, temp_D];
	})();

	const emits = defineEmits(["update:sexAgeData"])

	const traversalFn = (dataList) => {
		dataList.forEach(o => {
			o.text = o.ShowName
			o.value = o.ID
			o.children = o.Children
			if (o.children.length) traversalFn(o.children)
		})
	}

	onMounted(async () => {
		// 获取城市
		let data = await proxy.$get(getCity)
		if (data.code == 200) {
			traversalFn(data.data)
			state.columns = data.data
		}
	})

	const sexAgeDataFn = () => {
		let params = {
			Sex: state.curSex,
			Birthday: state.currentDate.join("-"),
			CityText: state.currentCity.join("-")
		}
		emits("update:sexAgeData", params)
	}

	const sexFn = (item) => {
		state.curSex = item.id
		state.sexList.forEach(o => {
			if (o.id == item.id) {
				o.iconGrey = o.icon[1]
			} else {
				o.iconGrey = o.icon[2]
			}
		})
		emits
	}

	const selectBirthday = () => {
		proxy.$refs.popupRef.open()

	}

	const cancel = () => {
		proxy.$refs.popupRef.close()
		proxy.$refs.popupCityRef.close()
	}
	const confirm = (val) => {
		state.currentDate = val.selectedValues
		proxy.$refs.popupRef.close()
	}

	// 选择城市
	const popupCity = () => {
		proxy.$refs.popupCityRef.open()
	}

	const confirmCity = (val) => {
		state.isCity = true
		state.currentCity[0] = val.selectedOptions[0].text
		state.currentCity[1] = val.selectedOptions[1].text
		proxy.$refs.popupCityRef.close()
	}

	// 获取定位
	const getAddress = () => {
		console.log(99)
		uni.showLoading()
		AMap.plugin('AMap.CitySearch', function() {
			var citySearch = new AMap.CitySearch()
			citySearch.getLocalCity(function(status, result) {
			uni.hideLoading()
				if (status === 'complete' && result.info === 'OK') {
					console.log(result,'当前位置')
					state.currentCity[0] = result.province
					state.currentCity[1] = result.city
					state.isCity = true
					// 查询成功，result即为当前所在城市信息
				}
			})
		})
	}

	defineExpose({
		sexAgeDataFn
	})
</script>

<style lang="scss" scoped>
	.register-title {
		color: #262626;
		font-size: 48rpx;
		margin-top: 80rpx;
		font-weight: 600;
	}

	.register-tip {
		color: #999;
		font-size: 32rpx;
		margin-top: 70rpx;
	}

	.register-sex {
		display: flex;
		margin-top: 50rpx;

		.register-sex-item {
			width: 168rpx;
			text-align: center;
			color: #999;

			img {
				width: 100%;
				margin-bottom: 20rpx;
			}

		}

		.register-sex-item:nth-child(1) {
			margin-right: 200rpx;
		}
	}

	.register-birthday {
		display: flex;
		margin-top: 44rpx;

		view {
			color: #DADADA;
			font-size: 48rpx;
			margin-right: 44rpx;
			font-weight: bold;
		}

		view:after {
			color: #262626;
			font-size: 28rpx;
			margin-left: 44rpx;
			position: relative;
			top: -10%;
		}

		.birthday-year:after {
			content: '年'
		}

		.birthday-month:after {
			content: '月'
		}

		.birthday-day:after {
			content: '日'
		}

		text {
			margin-right: 44rpx;
			font-weight: bold;
			line-height: 48rpx;
			color: #333;
		}
	}

	.register-birthday-cur {
		view {
			color: #333;
		}
	}

	.select-city {
		display: flex;
	}

	.register-position {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-city-position {
			font-weight: 500;
			color: #262626;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin-right: 0;

			text {
				margin-right: 0;
			}

			img {
				width: 28rpx;
				margin-right: 5rpx;
			}
		}
	}
</style>
